<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>模态框</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <style></style>
</head>

<body>
<!--按钮-->
<a href="#mymodal1" class="btn btn-primary" data-toggle="modal">大尺寸模态框</a>
<a href="#mymodal2" class="btn btn-primary" data-toggle="modal">小尺寸模态框</a>


<!--弹出的大模态框-->
<div id="mymodal1" class="modal fade" data-backdrop="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">我是标题</h4>
            </div>
            <div class="media-body">
                <p>  我是内容。。。。</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">关闭</button>
                <button class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<!--弹出的小模态框-->
<div id="mymodal2" class="modal fade">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">我是标题</h4>
            </div>
            <div class="media-body">
                <p>  我是内容。。。。</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">关闭</button>
                <button class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>

</div>

<script src="../js/jquery-1.12.4.js"></script>
<script src='../js/bootstrap.js'></script>
<script>
    //        默认弹出（激活弹窗）
    //       $('.modal').modal();



    //属性的使用
 /*    $('#mymodal1').modal({
         backdrop: false
     })*/


    //方法的使用，隐藏弹框
    /*$('#mymodal1').modal('hide');*/



    //事件的使用
    $('#mymodal1').on('hidden.bs.modal', function (e) {
        alert(1);
    })
</script>
</body>
</html>